<template>
  <div id="app">
    <header class="app-header">
      <xy-header :init-menu="false" title-text="选择系统"></xy-header>
    </header>
    <div class="app-body">
      <div class="app-view">
        <!-- <div class="app-group" v-for="(app,index) in apps" :key="index">
          <div class="app-group-title">{{app.title}}</div>
          <ul class="app-user-instances">
            <li
              class="app-user-instance"
              v-for="(instance,i) in app.instances"
              :key="i"
              @click="toInstance(instance)"
            >
              <div>{{instance.appInstanceName}}</div>
            </li>
          </ul>
        </div> -->

        <div class="app-none" v-if="(!apps || apps.length == 0) && initStatus">暂无权限，请联系管理员开通</div>
      </div>
    </div>
  </div>
</template>

<script>
import "@SCSS/common.scss";
import XyHeader from "@C/xyHeader";
export default {
  components: {
    XyHeader
  },
  data() {
    return {
      apps: [],
      initStatus: false
    };
  },
  methods: {
    getUserInfo() {
      this.$postStream("/admin/instance/ccb/polyv/authUser/userInfo/get.do", {
        data: {},
        success: res => {
          if (res.success) {
            console.log("userInfo::" + res.object);
            sessionStorage.setItem("curAccountAppId", res.object.appId);
            sessionStorage.setItem("curAccountEmail", res.object.email);
            sessionStorage.setItem("userType", res.object.userType);
            //userType:1为应用管理员，2为频道管理员，3为平台管理员 4为超级管理员
            window.location.href = "index.html#/channelManage";
          } else {
            this.$message.error('获取账号信息失败')
            setTimeout(() => {
              window.location.href = 'login.html'
            }, 1000);
          }
        },
      });
    },
    resize() {
      var content = document.querySelector(".app-body");
      if (content) {
        document.querySelector(".app-view").style.minHeight =
          content.offsetHeight - 40 + "px";
      }
    },
    init() {
      this.$postStream("/admin/auth/user/authAppUserInstance/list.do", {
        success: res => {
          if (!res.success) {
            return this.$message.warning(res.message);
          }
          if (res.object == null) {
            return;
          }
          this.apps = [];
          var apps = {};
          res.object.forEach(item => {
            apps[item.appId] = apps[item.appId] || [];
            apps[item.appId].push(item);
          });
          for (var key in apps) {
            this.apps.push({
              title: apps[key][0] && apps[key][0].appName,
              instances: apps[key] || []
            });
          }

          // 频道管理员管理多个频道进入第一个频道
          if(this.apps.length == 1){
            this.apps.some(item => {
              item.instances.some(vo => {
                if(vo.appCode == 'ccb-ulv-channel'){
                  this.toInstance(vo)
                }
              })
            })
          }
        },
        complete: () => {
          this.initStatus = true
        }
      });
    },
    toInstance(instance) {
      this.$postStream("/admin/auth/user/authAppUserInstance/toInstance.do", {
        data: {
          userInstanceId: instance.id
        },
        success: res => {
          if (!res.success) {
            return this.$message.warning(res.message);
          }
          // window.location.href = "index.html";
          this.getUserInfo();
        }
      });
    }
  },

  created() {
    window.onresize = function() {
      self.$root.eventHandle.$emit("RESIZE");
      self.resize();
    };
  },
  mounted() {
    this.resize();
    this.init();
  }
};
</script>


<style lang="scss">
@import "../../assets/scss/variable.scss";
@import "../../assets/scss/mixin.scss";
#app {
  height: 100%;
  display: -webkit-box;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

.app-header {
  display: -webkit-box;
  height: 60px;
  width: 100%;
  min-width: 1200px;
}

.app-body {
  -webkit-box-flex: 1;
  height: 100%;
  width: 100%;
  background-color: $xy-border-color-light;
  overflow: auto;
  padding: 20px;
}
.app-view {
  background: #fff;
}

.app-group {
  padding: 20px;
  border-bottom: 1px solid $xy-border-color-light;
}
.app-group:last-child {
  border-bottom: none;
}
.app-group-title {
  font-size: 20px;
  padding-left: 10px;
}
.app-user-instances {
  font-size: 0;
}
.app-user-instance {
  display: inline-block;
  width: 33.333%;
  font-size: 26px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  > div {
    border: 1px solid $xy-border-color-light;
    border-top: 4px solid #409eff;
    height: 140px;
    line-height: 140px;
  }
  > div:hover {
    background: #ddd;
    transition: background 0.2s ease-in-out;
  }
}
.app-none {
  color: #999;
  font-size: 30px;
  text-align: center;
  padding-top: 100px;
}
</style>

